<template>
    <div class="app">
        <div class="details">
            <div style="display: flex;flex-direction: row;align-items: center;">
                <choose-status-botton :docForm="docForm"></choose-status-botton>
                <el-button @click="startClick" style="margin-left: 10px;" type="primary" plain v-if="docForm.modelId && docForm.createBy===$store.getters.sysUser.userId && docForm.status != '02' && docForm.status != '04'">发起审批</el-button>
            </div>
            <div class="details-header-button" v-if="!executeTaskId">
                <i class="details-header-button-icon el-icon-refresh-right" @click="refreshClick" :class="[refreshLoading == true?'refreshRe':'']"></i>
                <i class="details-header-button-icon el-icon-edit" v-permission="'doc:form:edit'" @click="edidClick"></i>
                <i class="details-header-button-icon el-icon-delete" v-permission="'doc:form:del'" @click="deteleClick"></i>
            </div>
        </div>
        <!-- 执行任务 -->

        <CCExecuteTask v-if="!executeTaskId&&ccToMe" :processInstanceId="processInstanceId"></CCExecuteTask>
        <img :src="imagePath" style="width:800px" v-if="docForm.processInstanceId&&mySelf==true">
        <div class="details-content">
            <span class="details-content-title">{{docForm.name}}</span>
            <div class="details-content-misc">
                <div class="item">
                    <span class="details-content-misc-name">{{docForm.createBy}}</span>
                </div>
                <div class="item">
                    <span class="details-content-misc-subtitle" v-if="docForm.createTime"> 创建于
                        {{docForm.createTime}}</span>
                </div>
                <div class="item">
                    <span class="details-content-misc-subtitle" v-if="docForm.updateTime">, 最近更新于
                        {{docForm.updateTime}}</span>
                </div>
            </div>
            <div class="details-content-richtext">
                <span>{{docForm.content}}</span>
            </div>
            <div class="details-content-fields" v-if="formData">
                <parser :value="docForm.formData" :form-conf="formData" ref="parser" />
                <div class="details-content-isMask"></div>
            </div>
            <execute-task v-if="executeTaskId" :processInstanceId="processInstanceId" :visible.sync="dialogExcuteTaskVisible" :executeTaskId="executeTaskId"></execute-task>

            <el-tabs v-model="operation">
                <el-tab-pane label="附件" name="second">
                    <div class="details-content-subtask" v-if="docForm.docFilePath && docForm.docFilePath.length > 0">
                        <div class="details-content-operation-item" v-for="(items,index) in docForm.docFilePath">
                            <i class="iconfont icon-fujian-copy task-enclosure-icon" @click="fileClick(items)"></i>
                            <span class="task-enclosure-title">{{items.fileName}}</span>
                        </div>
                    </div>
                    <!-- <div class="details-content-operation-item" v-for="item in operationLog">
						<i class="el-icon-edit details-content-operation-item-icon"></i>
						<span class="details-content-operation-item-name">{{item.createName}}</span>
						<span class="details-content-operation-item-title">{{item.content}}</span>
						<span class="details-content-operation-item-date">{{item.createTime}}</span>
					</div>
					<el-empty v-if="operationLog && operationLog.length == 0" description="暂无日志"></el-empty> -->
                </el-tab-pane>
            </el-tabs>
        </div>

    </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { queryById, softDelete, processStart, procDoc } from "@/api/doc.js";
import chooseStatusBotton from "../../../components/chooseStatus/docStasus.vue";
import utils from "../../../utils/utils.js";
import { deleteAction, getAction, postAction, putAction } from "@/api/manage";
import Parser from "@/components/FormGenerator/components/parser";
import { list as logList } from "@/api/log.js";
import { Message } from "element-ui";
import ExecuteTask from "@/components/task/ExecuteTask.vue";
import CCExecuteTask from "@/components/task/CCExecuteTask.vue";
export default {
    name: "DocumentDetails",
    data() {
        return {
            refreshLoading: false,
            operation: "second",
            operationLog: [],
            docForm: { modelId: "" },
            formData: "",
            executeTaskId: "",
            dialogExcuteTaskVisible: false,
            processInstanceId: "",
            ccToMe: false,
            imagePath: "",
            mySelf: false,
        };
    },
    components: {
        chooseStatusBotton,
        Parser,
        ExecuteTask,
        CCExecuteTask,
    },
    filters: {},
    created() {
        var queryData = JSON.parse(this.$route.query.data);
        if (queryData.mySelf) {
            this.mySelf = queryData.mySelf;
        }
        if (queryData.docId) {
            this.docForm.docId = queryData.docId;
            if (queryData.type) {
                this.processInstanceId = queryData.id;
                if (queryData.type == "ccToMe") {
                    this.ccToMe = true;
                }
            }
            this.queryClick();
        }
        if (queryData.processInstanceId) {
            this.processInstanceId = queryData.processInstanceId;
            this.executeTaskId = queryData.executeTaskId;
            this.toDoQueryClick();
        }
    },
    methods: {
        showImage() {
            if (!this.imagePath) {
                this.imagePath =
                    `${process.env.VUE_APP_BASE_API}` +
                    "/flowable/processInstanceImage?processInstanceId=" +
                    this.docForm.processInstanceId +
                    "&access_token=" +
                    getToken() +
                    "&time=" +
                    new Date();
                console.log(this.imagePath);
            }
        },
        // 正常模式
        queryClick() {
            var _this = this;
            queryById({
                id: this.docForm.docId,
            }).then((res) => {
                console.log(res);
                _this.docForm = res.data;
                if (res.data.formData) {
                    _this.docForm.formData = JSON.parse(res.data.formData);
                }
                _this.manageClick(res.data);
                _this.loadLogList();
                _this.showImage();
            });
        },
        // 从待办任务过来
        toDoQueryClick() {
            var _this = this;
            procDoc({
                processInstanceId: this.processInstanceId,
            }).then((res) => {
                console.log(res);
                _this.docForm = res.data;
                if (res.data.formData) {
                    _this.docForm.formData = JSON.parse(res.data.formData);
                }
                _this.manageClick(res.data);
                _this.loadLogList();
            });
        },
        manageClick(data) {
            console.log(data);
            var _this = this;
            this.formData = data.formJson;
            if (data.formKey) {
                getAction(
                    "/flowable/form/queryById",
                    {
                        id: data.formKey,
                    },
                    false
                ).then(({ data }) => {
                    if (data.formJson) {
                        _this.formData = JSON.parse(data.formJson);
                    }
                });
            }
        },
        // 操作
        loadLogList() {
            var _this = this;
            console.log(this.taskForm);
            logList(
                {
                    logTypeId: _this.docForm.docId,
                    logType: "04",
                },
                false
            ).then((res) => {
                _this.operationLog = res.data;
                console.log(res);
            });
        },
        refreshClick() {
            var _this = this;
            this.refreshLoading = true;
            if (_this.executeTaskId) {
                this.toDoQueryClick();
            } else {
                this.queryClick();
            }
            setTimeout(function () {
                _this.refreshLoading = false;
            }, 1000);
        },
        deteleClick() {
            var _this = this;
            softDelete({
                ids: _this.docForm.docId,
            }).then((res) => {
                _this.$store
                    .dispatch("tagsView/delView", _this.$route)
                    .then(({ visitedViews }) => {
                        _this.$router.push({
                            path: "/document/index",
                        });
                    }); // 关闭当前tab回到列表
            });
        },
        edidClick() {
            var _this = this;
            var data = {
                docType: this.docForm.docType,
                dirId: this.docForm.dirId,
                docId: this.docForm.docId,
            };
            this.$router.push({
                path: "/document/edit",
                query: {
                    data: JSON.stringify(data),
                },
            });
        },
        startClick() {
            var _this = this;
            processStart({
                docId: this.docForm.docId,
            }).then(({ msg }) => {
                Message.success(msg);
                _this.queryClick();
            });
        },
        btnClaim() {
            var _this = this;
            putAction("/flowable/task/claim", {
                taskId: this.executeTaskId,
            })
                .then(({ msg }) => {
                    this.toDoQueryClick();
                    this.btnExcuteTask();
                })
                .catch((response) => {
                    this.toDoQueryClick();
                });
        },
        btnExcuteTask() {
            this.dialogExcuteTaskVisible = true;
        },
        btnUnclaim() {
            putAction("/flowable/task/unclaim", {
                taskId: this.executeTaskId,
            }).then(({ msg }) => {
                Message.success(msg);
                this.toDoQueryClick();
            });
        },
        fileClick(data) {
            window.open(data.fileUrl, "_blank");
        },
    },
};
</script>

<style scoped>
.app {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 84px);
    overflow-y: auto;
}

.details {
    z-index: 1;
    margin-top: 0;
    flex: none;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    box-shadow: inset 0 -1px 0 0 #dadee3;
    padding: 10px 10px;
    box-sizing: border-box;
}

.details-header-button {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.details-header-button-icon {
    padding: 8px 8px;
    color: #909aaa;
    font-size: 18px;
    margin-left: 10px;
    border-radius: 50%;
}

.details-header-button-icon:hover {
    background-color: #f5f6f8;
}

.refreshRe {
    -webkit-animation: rotate 1.2s linear infinite;
    /*Safari and Chrome*/
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -moz-transform: rotate(0deg);
        /* Firefox */
        -o-transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        /* IE 9 */
        -moz-transform: rotate(360deg);
        /* Firefox */
        -o-transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}

.details-content {
    padding: 15px 24px;
    width: 100%;
    flex-grow: 1;
    /* overflow-y: auto; */
}

.details-content-title {
    font-size: 24px;
    font-weight: 700;
    margin-top: 8px;
    margin-bottom: 12px;
    display: block;
}

.details-content-misc {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.item {
    margin-right: 5px;
}

.details-content-misc-name {
    color: #333333;
    font-size: 14px;
}

.details-content-misc-name:hover {
    color: #2c7ef8;
}

.details-content-misc-subtitle {
    color: #909aaa;
    font-size: 12px;
}

.details-content-fields {
    flex: 1;
    padding: 8px 16px;
    background-color: #fafbfb;
    /* margin-top: 10px; */
    border-radius: 4px;
    position: relative;
}

.details-content-richtext {
    flex: 1;
    min-height: 40px;
    margin-top: 10px;
}

.details-content-subtask {
    margin-top: 10px;
    flex: 1;
}

.details-content-subtask-title {
    color: #333;
    font-size: 12px;
    margin-bottom: 10px;
    font-weight: bold;
    display: block;
}

.details-content-operation-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 5px;
    box-shadow: inset 0 -1px 0 0 #dadee3;
}

.details-content-operation-item:last-child {
    box-shadow: inset 0 -1px 0 0 white;
}

/deep/.el-tabs__header {
    margin-bottom: 0px;
}

.details-content-operation-item-icon {
    font-size: 14px;
    color: #909aaa;
    margin-right: 10px;
}

.details-content-operation-item-name {
    font-size: 16px;
    color: #333333;
    margin-right: 5px;
}

.details-content-operation-item-title {
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    margin-right: 10px;
}

.details-content-operation-item-date {
    font-size: 12px;
    color: #909aaa;
}

.task-enclosure-icon {
    color: #2e405e;
    font-size: 16px;
    margin-right: 5px;
    font-weight: 700;
    cursor: pointer;
}

.task-enclosure-title {
    color: #2e405e;
    font-size: 14px;
    margin-right: 16px;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.details-content-isMask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* background-color: rgba(255, 255, 255); */
}
</style>
